Chapter 13

Implementing an ActiveX Menu Control

CONTENTS

As often happens with a new technology, the imagination begins to run ahead of developments. After you start using VBScript and ActiveX on your Web pages, the likelihood is that you will not be content with the forms-type controls supplied with the ActiveX Control Pad, and you'll want to do more.

So where do you find a source of extra controls to satisfy your needs? Well, unlike Java applets, which are relatively new, ActiveX controls (formerly OCX controls) have been in development and use for quite some time. Consequently, hundreds or even thousands of ActiveX controls are available on the Web. The best place to start looking is the Microsoft ActiveX Gallery.

Downloading New Controls from the Web

The Microsoft ActiveX Gallery is part of the Microsoft Site Builder Workshop site at http://www.microsoft.com/workshop/. There you'll find a large range of controls for a wide range of applications and solutions.

The address of the gallery at the time of this writing is http://www.microsoft.com/activex/gallery/. The site shown in Figure 13.1 lists controls available from Microsoft and also controls available from third-party vendors. The Microsoft controls are free to download and use, but before you use any control within your own Web pages, it is wise to check the copyright, usage, and other conditions of its use.

Figure 13.1 : The ActiveX Control Gallery.

To obtain a particular control from the Microsoft site, simply click the control name in the left lower frame. A page is then loaded to display a graphical snapshot of the control and a hyperlink to download the control, as shown in Figure 13.2.

Figure 13.2 : Ready to download the menu control.

For the example used in this chapter, you need to obtain the Microsoft Button menu control. When you click the hyperlink, a new page that contains the control is loaded. If you don't have the control loaded on your machine already, a control is downloaded to you from the Microsoft control repository. Just prior to the completion of the download, you are asked to confirm that you want to receive this control into your machine (as shown in Figure 13.3). This unique security feature ensures that users know what the source of a control is before they accept it onto the hard drive.

Figure 13.3 : The safety certificate for the menu control.

Note
A major concern regarding ActiveX controls and Java applets is the potential security risk. As you will see later in this chapter, this security certificate follows the control around so that it also displays on the machine of a user visiting your site when that user downloads the control from you.

After you accept the credentials of the control's author (in this case, Microsoft), the control is registered onto your machine and is ready to use.

The page to which you hyperlinked to download the control uses the new control (shown in Figure 13.4) so that you can see it in action. Before you leave the site, do two things:

Figure 13.4 : The Menu control installed and working.

  1. Look at the source of the page that downloaded and demonstrated the control. Save the source to a text file for later reference.
  2. Click the "View Programming Information" hyperlink to obtain a list of properties and methods for the control.

Now that you've acquired your shiny new Menu Button control, you can access it from the ActiveX Control Pad and use it on your own Web pages.

Implementing the ActiveX Menu Control

This example uses the Microsoft ActiveX Menu control, sometimes known as the Button Menu. You will create a simple user interface on a Web page, using two Menu controls and adding some straightforward VBScript to implement the menu's functionality. This section shows you how to use a newly downloaded control through the ActiveX Control Pad. For details on how to do the same using the HTML Layout control, see Chapter 14, "Using the HTML Layout Control." Furthermore, in the first part of the example, you run both the HTML page and the control locally. In the next section, you learn how to place the control on your Web site for the use of your site visitors.

  1. First, open the ActiveX Control Pad.
  2. Place your cursor between the <BODY> tags, and select Insert ActiveX Control from the Edit menu.
  3. The Insert ActiveX Control dialog is displayed. Select the BtnMenu object, as shown in Figure13.5.
    Figure 13.5 : Select the Menu control from the ActiveX Controls List.
    When the Button Menu object loads in the object editor, it does not have a default size. It looks rather odd, all crunched up in the corner as shown in Figure 13.6.
    Figure 13.6 : The Menu control when it first loads.
  4. Place your cursor on one of the handles, and drag the control to a respectable size, as shown in Figure 13.7. The exact size is not really important for this exercise.
    Figure 13.7 : The Menu control resized.
  5. You don't need to set any properties other than the size at this stage. The caption and menu items will be set by VBScript code as the object loads. Therefore, all you need to do is close the object editor, and the Control Pad automatically generates the code for the menu object in the HTML page (see Figure 13.8).
    Figure 13.8 : The definition code for the first Menu control.
  6. Your sample menu page will contain two Menu controls; the easiest way to generate a second object is to copy the code for the first object and paste it directly under the first. Then simply change the object ID to pMenu2, as shown in Figure 13.9.
    Figure 13.9 : The definition code for both Menu controls.

The menu captions and menu items are added using VBScript code in the Window object's OnLoad event. This means that as the page loads, it loads the controls within the page and then executes the code to fill in the menu options and caption. If you place this code in an event that occurs prior to the loading of the objects, you will generate a runtime error. Follow these steps to add the onLoad event handler code:

  1. Open the ActiveX Script Wizard and click the plus sign to the left of the Window Object in the left events pane.
  2. Select the onLoad event.
  3. Click the plus sign to the left of the pmenu1 object in the right actions pane.
  4. A full list of the menu object's properties and methods is now displayed. The method used to add menu items is called AddItem. Double-click this method name, and a line of code is automatically generated in the OnLoad event handler in the lower Script Window. (See Figure 13.10.)
    Figure 13.10: Starting the onLoad event in the Script Wizard.
  5. You now need to manually edit the code you have been given and replace the variable placeholders with your own literal values. First, replace item with First Menu Option. Then replace index with 1.
  6. Repeat steps 4 and 5 to generate lines of code for a total of four menu options, as shown in Figure 13.11.
    Figure 13.11: The menu options for Menu One.
  7. Now you need to specify a caption that will appear on the face of the button menu. To do this, double-click the Caption property, and edit the automatic code (as shown in Figure 13.12) to read as follows:
    Figure 13.12: The caption for Menu One.
    pmenu1.Caption = "Menu One"
  8. To add menu options for Menu Two (pmenu2), click the plus sign to the left of the pmenu2 object in the right actions pane, and then repeat steps from step 4 through 6. Your event handler should then resemble the one in Figure 13.13. Again, you might find it easier and quicker to simply cut and paste the code for the first menu and manually amend the variables.

Figure 13.13: The complete onLoad event.

Now you have two menus on the page, both with captions and four options. But what happens when you click one of these options? The answer is that the menu object's select event is fired. Your next task, therefore, is to write code that will execute within the select event handler. The select event handler has one argument: the index number of the menu option that the user selected. Therefore, you have only one select event handler for the whole menu, but it executes differently for each menu option. The best way to achieve this is to use a Select Case control block.

  1. Click the plus sign to the left of the pMenu1 object in the left events pane.
  2. Choose the Select event.
  3. Enter the following code into the event handler for Menu One's Select event: 
 Select Case item
  Case 1
   Alert "You selected Option One from Menu One"
  Case 2
   Alert "You selected Option Two from Menu One"
  Case 3
   Alert "You selected Option Three from Menu One"
  Case 4
   Alert "You selected Option Four from Menu One"
End Select

Now repeat this for pMenu2, amending the Alert captions to read ...from Menu Two. The completed event handler for Menu Two's select event is shown in Figure 13.14.

Figure 13.14: The complete event handler for Menu Two's Select event.

For this example, the coding is completed. Now click OK at the bottom of the Script Wizard window to make the Script Wizard generate the code into the HTML page, as shown in Figure 13.15.

Figure 13.15: The completed script is automatically generated and placed in the text editor.

Save the file as menudemo.htm, and test it through your MSIE3.0 browser. You should have two menus with four options each (see Figure 13.16). When clicked, the menus display an alert box informing you of which option was clicked (see Figure 13.17).

Figure 13.16: Select a menu option.

Figure 13.17: The select event fires.

You can now run this page from your local hard drive, but what happens if you place it on your Web site? On your machine it will run OK. Internet Explorer first checks your hard drive for the btnmenu.ocx file and, if found, loads it and away you go. This is fine for you and the other users with the button menu control, but what about users who don't have the button menu control when they reach your page?

Downloading New Controls to Your Users

Every ActiveX control has a parameter property called CodeBase, which tells Internet Explorer (and any other ActiveX-enabled browser) where it can find a copy of the control if it cannot find one locally (on the client machine).

CodeBase has one major restriction. It must point at the same domain from which the page was loaded.The following list shows you how to set the CodeBase and test downloading the page from your Web site as though you are the user. For this example, I've used one of my domains, which happens to be called vbscripts.com (cheap promo!).

  1. To change the CodeBase property, load the menudemo.htm file into the ActiveX Control Pad, and click the object icon next to the pmenu1 object definition.
  2. Select the CodeBase property in the property editor and enter the full URL of the domain, the directory where you plan to store the control, and also the btnmenu.ocx filename. (See Figure 13.18.)
    Figure 13.18: Amending the CodeBase property.
  3. Don't forget to click the Apply button.
  4. Close the object editor in order to generate the new Object definition, including the CodeBase, as shown in Figure 13.19.
    Figure 13.19: The new control definition.

Repeat the amendment on the second menu object (pmenu2), and save the file.

Now transfer the HTML file (menudemo.htm) and the btnmenu.ocx file to your server, remembering to locate the OCX file in the place you specified in the CodeBase property. You can find the btnmenu.ocx file in your windows\occache\ subdirectory.

Before you do anything else, you must remove the btnmenu.ocx file from your machine; otherwise, the browser simply runs your local copy, and you haven't performed the test properly. Furthermore, if you still have MSIE3.0 open with the menu control in it, you must close the browser to free the control from memory. Just to be on the safe side, rather than simply deleting the file, copy it to another subdirectory and rename it.

You are now ready to test your first online ActiveX Web page (drum roll…). Fire up the browser, and enter the URL of the menudemo.htm file. As the file is loading, the status bar should tell you that it is installing a component. Then the security certificate is displayed as shown in Figure 13.20.

Figure 13.20: The controls security certificate.

Note
One consideration when using ActiveX controls is the time that is taken to download from the Web site. As you know, this is unquantifiable because it depends upon the Internet connections for you, the client, and the server; the time of day; the wind direction; and a million other variables. However, don't forget that only those users who don't currently have this control will need to download it. And users who visit your site regularly or who have visited another site with the same control will have almost instant access to the control because the browser loads their local copy.

I tend to think that it's all right to accept this control. Click OK, and the control completes its download and registers its presence on your machine. The Menu controls then appear on the page, ready to be used (as shown in Figure 13.21). Congratulations!

Figure 13.21: The completed Web page working online.

Here's the complete source code for the sample project menudemo.htm: 

<HTML>
<HEAD>
    <SCRIPT LANGUAGE="VBScript">
<!--
Sub window_onLoad()
call pmenu1.AddItem("First Option", 1)
call pmenu1.AddItem("Second Option", 2)
call pmenu1.AddItem("Third Option", 3)
call pmenu1.AddItem("Fourth Option", 4)
pmenu1.Caption = "Menu One"
call pmenu2.AddItem("First Option", 1)
call pmenu2.AddItem("Second Option", 2)
call pmenu2.AddItem("Third Option", 3)
call pmenu2.AddItem("Fourth Option", 4)
pmenu2.Caption = "Menu Two"
end sub
-->
    </SCRIPT>
<TITLE>Menu Demonstration Page</TITLE>
</HEAD>
<BODY BGCOLOR="white">
    <SCRIPT LANGUAGE="VBScript">
<!--
Sub pmenu1_Select(item)
 Select Case item
  Case 1
   Alert "You selected Option One from Menu One"
  Case 2
   Alert "You selected Option Two from Menu One"
  Case 3
   Alert "You selected Option Three from Menu One"
  Case 4
   Alert "You selected Option Four from Menu One"
End Select
end sub
-->
    </SCRIPT>
    <OBJECT ID="pmenu1" WIDTH=95 HEIGHT=35 TYPE="application/x-oleobject"
 CLASSID="CLSID:52DFAE60-CEBF-11CF-A3A9-00A0C9034920"
 CODEBASE="http://www.vbscripts.com/examples/btnmenu.ocx">
</OBJECT>
    <SCRIPT LANGUAGE="VBScript">
<!--
Sub pmenu2_Select(item)
Select Case item
  Case 1
   Alert "You selected Option One from Menu Two"
  Case 2
   Alert "You selected Option Two from Menu Two"
  Case 3
   Alert "You selected Option Three from Menu Two"
  Case 4
   Alert "You selected Option Four from Menu Two"
End Select
end sub
-->
    </SCRIPT>
     <OBJECT ID="pmenu2" WIDTH=95 HEIGHT=35 TYPE="application/x-oleobject"
 CLASSID="CLSID:52DFAE60-CEBF-11CF-A3A9-00A0C9034920"
 CODEBASE="http://www.vbscripts.com/examples/btnmenu.ocx">
</OBJECT>
</BODY>
</HTML>

Workshop Wrap-Up

ActiveX controls open up a whole new world of possibilities for your Web pages. Controls that used to be available only in Windows applications now can be used in your Web pages-and, as you have seen, you can add them quickly and easily. As you travel the Net, keep your eyes open for new and interesting controls, many of which are available for free.

Next Steps

Now that you've had a taste of what ActiveX can really do for your Web site, you can find out more in these chapters:

Q&A

Q:
What happens if a user has a version of the control that is different from the one on my server?
A:
To ensure compatibility you can add the version number of the control with the CodeBase parameter, like this:
http://www.youdomain.com/subdir/btnmenu.ocx#Version=4,70,0,1161
Q:
Great, but how do I know what version number my control is?
A:
You can obtain the version number from the source of the page from which you obtained the control at the Site Builder workshop. Simply select View Source when you've downloaded a new control, and copy and paste the version number from their CodeBase parameter.